<template>
  <div class="app-container">
    <aside>ASE 加密/解密</aside>
    <div style="padding: 8px 24px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="测试工具" name="first">
          <el-form label-width="120px" :model="formSeach">
            <el-row :gutter="12">
              <el-col :span="24">
                <el-form-item label="密钥（key）：">
                  <el-input
                    placeholder="请输入密钥"
                    v-model="formSeach.key"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="偏移（iv）：">
                  <el-input
                    placeholder="请输入偏移"
                    v-model="formSeach.iv"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-input
                  type="textarea"
                  placeholder="输入"
                  rows="10"
                  v-model="formSeach.value1"
                ></el-input>
              </el-col>

              <el-col :span="24" style="margin: 10px 0">
                <el-button type="primary" @click="encryption">加密</el-button>
                <el-button type="primary" @click="decode">解密</el-button>
                <el-button type="primary" @click="exchange">交换</el-button>
              </el-col>

              <el-col :span="24">
                <el-input
                  type="textarea"
                  placeholder="输出"
                  v-model="formSeach.value2"
                  rows="10"
                ></el-input>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="使用文档" name="second">
          <el-form>
            <tinymce v-model="aaa" height="58vh" />
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Crypto from "@/vendor/ase.js";
import Tinymce from "@/components/Tinymce";
export default {
  data() {
    return {
      formSeach: {
        key: "",
        iv: "",
        value1: "",
        value2: "",
      },

      activeName: "first",

      aaa: `<p><strong>安装</strong></p>
            <hr />
            <pre class="language-markup"><code>npm i crypto-js</code></pre>
            <p><code></code></p>
            <p><strong>引入</strong></p>
            <hr />
            <pre class="language-markup"><code> import CryptoJS from "crypto-js"</code></pre>
            <p><strong>封装解密方法</strong></p>
            <hr />
            <pre class="language-javascript"><code>//接收传入：data ， AES_KEY ，IV            
            //data：传入的密文            
            //AES_KEY：密钥             
            //IV：偏移            
            decrypt(data, AES_KEY, IV) {
              const key = CryptoJS.enc.Utf8.parse(AES_KEY);                 
              const iv = CryptoJS.enc.Utf8.parse(IV);
              let parmse = {
                iv,
                mode:CryptoJS.mode.CB,
                padding: CryptoJS.pad.Pkcs
              }     
              const decrypt = CryptoJS.AES.decrypt(data, key, parmse) 
              let result = decrypt.toString(CryptoJS.enc.Utf8);                
              return decrypt; //返回结果
            }</code></pre>
            <div>&nbsp;</div>
            <div><strong>封装加密方法</strong><hr /></div>
            <div>
            <pre class="language-javascript"><code>//接收传入：data ， AES_KEY ，IV         
            //data：传入的加密需要加密的字符串         
            //AES_KEY：密钥         
            //IV：偏移         
            encrypt(data, AES_KEY, IV) {
                const key = CryptoJS.enc.Utf8.parse(AES_KEY);
                const iv = CryptoJS.enc.Utf8.parse(IV);
                const encrypted = CryptoJS.AES.encrypt(data, key, {
                  iv,
                  mode: CryptoJS.mode.CBC,
                  padding: CryptoJS.pad.Pkcs7,
                });
                return encrypted.toString();  //返回结果
            },</code></pre>
            </div>
            <div>&nbsp;</div>
            <div><strong>调用加密、解密方法即可</strong></div>
            <div>
            <div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</div>
            </div>`,
    };
  },

  components: {
    Tinymce,
  },

  methods: {
    // 加密
    encryption() {
      if (!this.formSeach.key || !this.formSeach.iv) {
        this.$message.warning("密钥或偏移为空");
        return;
      }

      // 加密value1
      let result = Crypto.encrypt(
        JSON.stringify(this.formSeach.value1),
        this.formSeach.key,
        this.formSeach.iv
      );

      this.formSeach.value2 = result;
    },

    // 解密
    decode() {
      if (!this.formSeach.value1) {
        this.$message.warning("待解密数据为空");
        return;
      }

      if (!this.formSeach.key || !this.formSeach.iv) {
        this.$message.warning("密钥或偏移为空");
        return;
      }

      let result = Crypto.decrypt(
        this.formSeach.value1,
        this.formSeach.key,
        this.formSeach.iv
      );

      if (!result) {
        this.$message.warning("可能不是有效的密文");
        return;
      }

      console.log(result, "result");

      this.formSeach.value2 = result.replace(/^"|"$/g, "");
    },

    // 交换
    exchange() {
      let temp = this.formSeach.value1;
      this.formSeach.value1 = this.formSeach.value2;
      this.formSeach.value2 = temp;
    },

    // 点击tabs
    handleClick() {},
  },
};
</script>

<style></style>
